<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		background-color: #000;
		display: -webkit-flex;
		display: flex;

		-webkit-flex-flow:row wrap;
		flex-flow:row wrap;
		justify-content:space-between;
	}
	.box{
		margin: 10px;
		display: flex;
		width: 100px;
		height: 100px;
		
		box-shadow:
		    inset 0 5px white, 
		    inset 0 -5px #bbb,
		    inset 5px 0 #d7d7d7, 
		    inset -5px 0 #d7d7d7;
	
		border-radius: 10px;
		background-color: #e7e7e7;
		padding: 4px;
	}
	.box1{

	}
	.box2{
		justify-content:center;
	}
	.box3{
		justify-content:flex-end;
	}
	.box4{
		justify-content:flex-start;
		align-items:center;
	}
	.box5{
		justify-content:center;
		align-items:center;
	}
	.box6{
		justify-content:flex-end;
		align-items:center;
	}
	.box7{
		justify-content:flex-start;
		align-items:flex-end;
	}
	.box8{
		justify-content:center;
		align-items:flex-end;
	}
	.box9{
		justify-content:flex-end;
		align-items:flex-end;
	}

	
	.box11{
		
	}
	.box12{
		justify-content:space-between;
	}
	.box13{
		justify-content:flex-end;
	}
	.box14{
		justify-content:space-between;
	}
	.box14 .item2{
		align-self:flex-end;
	}
	.box15 .item2{
		align-self:center;
	}
	.box16{
		justify-content:flex-end;
	}
	.box16 .item1{
		align-self:center;
	}
	.box17{
		align-items:center;
	}
	.box18{
		align-items:center;
	}
	.box18 .item2{
		align-self:flex-start;
	}
	.box19{
		justify-content:space-between;
		align-items:center;
	}
	.box19 .item2{
		align-self:flex-start;
	}
	.box20{
		justify-content:space-between;
	}
	.box20 .item1{
		align-self:flex-end;
	}
	.box21{
		justify-content:flex-end;
		align-items:center;
	}
	.box21 .item2{
		align-self:flex-end;
	}
	.box22{
		flex-direction:column;
	}
	.box23{
		flex-direction:column-reverse;
	}
	.box24{
		flex-direction:column;
		align-items:center;
	}
	.box25{
		flex-direction:column-reverse;
		align-items:center;
	}
	.box26{
		flex-direction:column-reverse;
		align-items:flex-end;
	}
	.box27{
		flex-direction:column-reverse;
		align-items:flex-end;
	}
	.box27 .item1{
		align-self:center;
	}
	.box28{
		flex-direction:column;
		align-items:center;
	}
	.box28 .item2{
		align-self:flex-end;
	}

	
	.box310{

	}
	.box311 .item2{
		align-self:center;
	}
	.box311 .item3{
		align-self:flex-end;
	}
	.box312 .item3{
		align-self:center;
	}
	.box313{
		align-items:center;
	}
	.box313 .item1{
		align-self:flex-start;
	}
	.box314{
		align-items:center;
	}
	.box315{
		flex-direction:column;
	}
	.box316{
		flex-direction:column;
	}
	.box316 .box316-1{
		display: flex;
		justify-content:center;
	}
	.box316 .box316-2{
		display: flex;
		justify-content:flex-end;
	}
	.box317{
		flex-direction:column;
	}
	.box317-1{
		display: flex;
		justify-content:center;
	}
	.box317-2{
		display: flex;
	}
	.box318{
		flex-direction:column-reverse;
	}
	.box318-1{
		display: flex;
		justify-content:center;
	}
	.box318-2{
		display: flex;
		justify-content:flex-end;
	}
	
	
	.box4000{
		justify-content:space-between;	
	}
	.box4000-1{
		display: flex;
		flex-direction:column;
		justify-content:space-between;
	}
	.box4000-2{
		display: flex;
		flex-direction:column;
		justify-content:space-between;
	}

	
	.box5000{
		/*justify-content:space-between;*/
	}
	.box5000-1,.box5000-3{
		display: flex;
		flex-direction:column;
		justify-content:space-between;
	}
	.box5000-2{
		display: flex;
		flex-direction:column;
		justify-content:center;
	}

	.box6000{
		/*justify-content:space-between;*/
	}
	.box6000-1,.box6000-2,.box6000-3{
		display: flex;
		flex-direction:column;
		justify-content:space-between;
	}
	.box6001{
		justify-content:space-between;
	}
	.box6001-1,.box6001-2{
		display: flex;
		flex-direction:column;
	}


	.item{
		width: 20px;
		height: 20px;
		border-radius: 10px;
		margin: 7px;
  		background-color: #333;
  		box-shadow: inset 0 3px #111, inset 0 -3px #555;
	}
	</style>
</head>
<body>
	<!-- 1个点 begin -->
	<div class="box box1">
	  <span class="item"></span>
	</div>
	<div class="box box2">
	  <span class="item"></span>
	</div>
	<div class="box box3">
	  <span class="item"></span>
	</div>
	<div class="box box4">
	  <span class="item"></span>
	</div>
	<div class="box box5">
	  <span class="item"></span>
	</div>
	<div class="box box6">
	  <span class="item"></span>
	</div>
	<div class="box box7">
	  <span class="item"></span>
	</div>
	<div class="box box8">
	  <span class="item"></span>
	</div>
	<div class="box box9">
	  <span class="item"></span>
	</div>
	<!-- 1个点 end -->
	
	<!-- 2个点 begin -->
	<div class="box box11">
	  <span class="item"></span>
	  <span class="item"></span>
	</div>
	<div class="box box12">
	  <span class="item"></span>
	  <span class="item"></span>
	</div>
	<div class="box box13">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box14">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box15">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box16">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box17">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box18">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box19">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box20">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box21">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box22">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box23">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box24">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box25">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box26">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box27">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<div class="box box28">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	</div>
	<!-- 2个点 end -->
	
	<!-- 3个点 begin -->
	<div class="box box310">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	  <span class="item item3"></span>
	</div>
	<div class="box box311">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	  <span class="item item3"></span>
	</div>
	<div class="box box312">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	  <span class="item item3"></span>
	</div>
	<div class="box box313">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	  <span class="item item3"></span>
	</div>
	<div class="box box314">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	  <span class="item item3"></span>
	</div>
	<div class="box box315">
	  <span class="item item1"></span>
	  <span class="item item2"></span>
	  <span class="item item3"></span>
	</div>

	<div class="box box316">
		<div class="box316-1">
	  		<span class="item item1"></span>
	  	</div>
	  	<div class="box316-2">
		    <span class="item item2"></span>
		    <span class="item item3"></span>
	  	</div>
	</div>
	<div class="box box317">
		<div class="box317-1">
			<span class="item item1"></span>		
		</div>
	  	<div class="box317-2">
	   	    <span class="item item2"></span>
	  	    <span class="item item3"></span>
	  	</div>
	</div>
	<div class="box box318">
	  	<div class="box318-1">
			<span class="item item1"></span>		
		</div>
	  	<div class="box318-2">
	   	    <span class="item item2"></span>
	  	    <span class="item item3"></span>
	  	</div>
	</div>
	<!-- 3个点 end -->

	<!-- 4个点 begin -->
	<div class="box box4000">
		<div class="box4000-1">
			<span class="item item1"></span>		
			<span class="item item1"></span>		
		</div>
	  	<div class="box4000-2">
	   	    <span class="item item2"></span>
	  	    <span class="item item3"></span>
	  	</div>
	</div>

	<div class="box box5000">
		<div class="box5000-1">
			<span class="item item1"></span>		
			<span class="item item1"></span>		
		</div>
	  	<div class="box5000-2">
	  	    <span class="item item3"></span>
	  	</div>
		<div class="box5000-3">
			<span class="item item1"></span>		
			<span class="item item1"></span>		
		</div>
	</div>

	<div class="box box6000">
		<div class="box6000-1">
			<span class="item item1"></span>		
			<span class="item item1"></span>		
		</div>
	  	<div class="box6000-2">
	  	    <span class="item item3"></span>
	  	    <span class="item item3"></span>
	  	</div>
		<div class="box6000-3">
			<span class="item item1"></span>		
			<span class="item item1"></span>		
		</div>
	</div>

	<div class="box box6001">
		<div class="box6001-1">
			<span class="item item1"></span>		
			<span class="item item2"></span>
			<span class="item item3"></span>		
		</div>
		<div class="box6001-2">
			<span class="item item1"></span>
			<span class="item item2"></span>		
			<span class="item item3"></span>		
		</div>
	</div>

</body>
</html>